<template>
	<picker :mode="mode":value="defaultValue" @change="change" range-key="dictLabel" :range="options" :start="start" :end="end">
		<view class="fu-picker flex-between-center">
			<view :class="{'color-999':!value}">{{(mode==='selector'?$common.selectDictLabel(options,value):value) || placeholder}}</view>
			<view class="mar-l-5">
				<u-icon name="arrow-down-fill" color="#c0c4cc" size="26"></u-icon>
			</view>
		</view>
	</picker>
</template>

<script>
	export default {
		name: 'FuPicker',
		props: {
			value: [String, Number],
			mode: {
				type: String,
				default: 'selector'
			},
			options: {
				type: Array,
				default: ()=>[]
			},
			start: {
				type: String,
				default: ''
			},
			end: {
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请选择'
			},
		},
		data() {
			return {
				defaultValue: ''
			}
		},
		methods: {
			change(e){
				this.defaultValue = e.detail.value
				if(this.mode==='selector'){
					let value = this.options[e.detail.value].dictValue
					this.$emit("input", value)
					this.$emit('change',this.options[e.detail.value])
				}else{
					this.$emit("input", e.detail.value)
					this.$emit('change',e.detail.value)
				}
			}
		}
	}
</script>
